<!-- 商户申请审核 -->
<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="订单状态" prop="orderStatus">
          <!-- <TagSelect :tag-list="SETTLE_TYPE_LIST" v-model="queryParams.userType" /> -->
          <el-select
            v-model="queryParams.orderStatus"
            placeholder="请选择"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="item in STATUS_LIST"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="initList">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <base-page-table
      :table-data="tableData"
      :table-columns-data="tableColumnsData"
      :loading="loading"
      :page-num="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :total="queryParams.total"
      @handleQuery="handleQuery"
    >
      <template #index="scope">
        {{ scope.index + 1 }}
      </template>
      <!-- <template #orderStatus="scope">
        <el-tag v-if="scope.row.orderStatus == 1" type="success" class="margin-r-10">通过</el-tag>
        <el-tag v-if="scope.row.status == 2" type="danger" class="margin-r-10">驳回</el-tag>
        <el-tag v-if="scope.row.status == 0" type="warning">未审核</el-tag>
      </template> -->
      <template #orderStatus="scope">
        <el-tag type="primary" class="margin-r-10">
          {{ EQUITY_MALL_STATUS[scope.row.orderStatus] }}
        </el-tag>
      </template>
      <template #action="scope">
        <el-button link @click="openOrderDetail(scope.row)">查看订单</el-button>
        <el-button
          link
          type="primary"
          :disabled="scope.row.orderStatus != EQUITY_MALL_STATUS_OBJECT['已下单']"
          @click="handleAudit(scope.row, EQUITY_MALL_STATUS_OBJECT['审核通过'])"
        >
          通过
        </el-button>
        <el-button
          link
          type="danger"
          :disabled="scope.row.orderStatus != EQUITY_MALL_STATUS_OBJECT['已下单']"
          @click="handleAudit(scope.row, EQUITY_MALL_STATUS_OBJECT['审核不通过'])"
        >
          驳回
        </el-button>
      </template>
    </base-page-table>
    <order-detail ref="orderDetailRef" />
    <dialog-reject ref="dialogRejectRef" @auditOrder="rejectOrder" />
  </div>
</template>
<script setup>
import EquityMallOrderAPI from "@/api/equitymall/order";
import DialogReject from "./dialog-reject.vue";
import OrderDetail from "./order-detail/index.vue";
import { EQUITY_MALL_STATUS, EQUITY_MALL_STATUS_OBJECT } from "@/enums/EquityMallEnum";
const STATUS_LIST = computed(() => {
  return Object.keys(EQUITY_MALL_STATUS).map((key) => {
    return {
      label: EQUITY_MALL_STATUS[key],
      value: key,
    };
  });
});
const queryParams = reactive({
  orderStatus: "",
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
const queryFormRef = ref();
const tableData = ref([
  {
    nickname: "张三",
    type: "个人",
    phonenumber: "13800138000",
    status: 1,
  },
  {
    nickname: "李四",
    type: "企业",
    phonphonenumbereNumber: "13800138001",
    status: 0,
  },
]);
const tableColumnsData = ref([
  {
    width: 60,
    label: "序号",
    prop: "index",
    align: "center",
    customSlot: "index",
    showOverflowTooltip: true,
  },
  {
    label: "订单号",
    prop: "orderNo",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "姓名",
    prop: "shippingName",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "手机号",
    prop: "shippingPhone",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "收货地址",
    prop: "shippingAddress",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "支付积分",
    prop: "totalPointsPrice",
    align: "center",
    showOverflowTooltip: true,
  },
  // {
  //   width: 100,
  //   label: "订单来源",
  //   prop: "orderSource",
  //   align: "center",
  //   showOverflowTooltip: true,
  // },
  {
    label: "订单状态",
    prop: "orderStatus",
    align: "center",
    showOverflowTooltip: true,
    customSlot: "orderStatus",
  },
  // {
  //   width: 100,
  //   label: "客服",
  //   prop: "customerService",
  //   align: "center",
  //   showOverflowTooltip: true,
  // },
  // {
  //   label: "审核备注",
  //   prop: "customerNote",
  //   align: "center",
  //   showOverflowTooltip: true,
  // },
  {
    label: "操作",
    prop: "action",
    width: 250,
    align: "center",
    fixed: "right",
    showOverflowTooltip: false,
    customSlot: "action",
  },
]);
const dialogRejectRef = ref();
const activeRow = ref();
const rejectOrder = (remark) => {
  funcAuditOrder({
    orderId: activeRow.value.id,
    orderStatus: EQUITY_MALL_STATUS_OBJECT["审核不通过"],
    remark: remark,
  });
};
const handleAudit = (row, status) => {
  activeRow.value = row;
  if (status == EQUITY_MALL_STATUS_OBJECT["审核通过"]) {
    funcAuditOrder({
      orderId: row.id,
      orderStatus: status,
    });
  } else {
    dialogRejectRef.value.showModal();
  }
};
/**
 * 请求相关
 *
 */
//获取入驻申请列表
const loading = ref(false);
const funcGetOrderList = async () => {
  try {
    loading.value = true;
    let params = {
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
    };
    if (queryParams.orderStatus) {
      params.orderStatuses = [Number(queryParams.orderStatus)];
    }
    const res = await EquityMallOrderAPI.getOrderPage(params);
    tableData.value = res.list;
    queryParams.total = res.total;
    // 刷新列表
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};
//审核入驻申请
const funcAuditOrder = async (params) => {
  try {
    const res = await EquityMallOrderAPI.auditOrder(params);
    funcGetOrderList();
  } catch (err) {
    console.log(err);
  } finally {
  }
};
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.orderStatus = "";
  initList();
}
function handleQuery(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  funcGetOrderList();
}
function initList() {
  queryParams.pageNum = 1;
  funcGetOrderList();
}
const orderDetailRef = ref();
function openOrderDetail(row) {
  orderDetailRef.value.showModal(row);
}
onMounted(() => {
  funcGetOrderList();
});
</script>
<style lang="scss" scoped></style>
